---
title: Botões
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

Uma lista de botões e grupos de botões usados no aplicativo.

## Botão

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props      | Tipo                                     | Descrição                                                                                                                                   |
| ---------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| className  | Nome opcional para estilização adicional | Nome de classe opcional para estilização adicional                                                                                          |
| Ícone      | `React.ComponentType`                    | Um componente de ícone opcional exibido dentro do botão                                                                                     |
| título     | Nome opcional para estilização adicional | O conteúdo de texto do botão                                                                                                                |
| fullWidth  | booleano                                 | Define se o botão deve ocupar toda a largura do seu contêiner                                                                               |
| variante   | Nome opcional para estilização adicional | A variante de estilo visual do botão. As opções incluem `primário`, `secundário` e `terciário`                              |
| tamanho    | Nome opcional para estilização adicional | O tamanho do botão. Tem duas opções: `pequeno` e `médio`                                                    |
| posição    | Nome opcional para estilização adicional | A posição do botão em relação aos seus irmãos. As opções incluem: `isolado`, `esquerda`, `direita` e `meio` |
| realce     | Nome opcional para estilização adicional | A cor de destaque do botão. As opções incluem: `padrão`, `azul` e `perigo`                                  |
| em breve   | booleano                                 | Indica se o botão está marcado como "em breve" (por exemplo, para recursos futuros)                                      |
| desativado | booleano                                 | Specifies whether the button is disabled or not                                                                                             |
| foco       | booleano                                 | Determina se o botão tem foco                                                                                                               |
| onClick    | função                                   | Uma função de retorno de chamada que é acionada quando o usuário clica no botão                                                             |

</Tab>

</Tabs>

## Grupo de Botões

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| Props           | Tipo                                     | Descrição                                                                                                                                  |
| --------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| className       | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                                                                                   |
| Ícone           | `React.ComponentType`                    | Um componente de ícone opcional exibido dentro do botão                                                                                    |
| título          | Nome opcional para estilização adicional | O conteúdo de texto do botão                                                                                                               |
| tamanho         | Nome opcional para estilização adicional | O tamanho do botão. Tem duas opções: `pequeno` e `médio`                                                   |
| posição         | Nome opcional para estilização adicional | A posição do botão em relação aos seus irmãos. As opções incluem: `isolado`, `esquerda`, `meio`, `direita` |
| aplicarSombra   | booleano                                 | Determina se deve aplicar sombra ao botão                                                                                                  |
| aplicarDesfoque | booleano                                 | Determina se deve aplicar um efeito de desfoque ao botão                                                                                   |
| desativado      | booleano                                 | Determina se o botão está desabilitado                                                                                                     |
| foco            | booleano                                 | Indica se o botão tem foco                                                                                                                 |

</Tab>
</Tabs>

## Grupo de Botões Flutuantes

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| Props   | Tipo                                     | Descrição                                                                                | Padrão  |
| ------- | ---------------------------------------- | ---------------------------------------------------------------------------------------- | ------- |
| tamanho | Nome opcional para estilização adicional | O tamanho do botão. Tem duas opções: `pequeno` e `médio` | pequeno |
| filhos  | ReactNode                                | An array of React elements representing the individual buttons within the group          |         |

</Tab>

</Tabs>

## Botão de Ícone Flutuante

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props           | Tipo                                     | Descrição                                                                                                                                   |
| --------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| className       | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                                                                                    |
| Ícone           | `React.ComponentType`                    | Um componente de ícone opcional exibido dentro do botão                                                                                     |
| tamanho         | Nome opcional para estilização adicional | O tamanho do botão. Tem duas opções: `pequeno` e `médio`                                                    |
| posição         | Nome opcional para estilização adicional | A posição do botão em relação aos seus irmãos. As opções incluem: `isolado`, `esquerda`, `direita` e `meio` |
| aplicarSombra   | booleano                                 | Determina se deve aplicar sombra ao botão                                                                                                   |
| aplicarDesfoque | booleano                                 | Determina se deve aplicar um efeito de desfoque ao botão                                                                                    |
| desativado      | booleano                                 | Determina se o botão está desabilitado                                                                                                      |
| foco            | booleano                                 | Indica se o botão tem foco                                                                                                                  |
| aoClicar        | função                                   | Uma função de retorno de chamada que é acionada quando o usuário clica no botão                                                             |
| estáAtivo       | booleano                                 | Determina se o botão está em um estado ativo                                                                                                |

</Tab>

</Tabs>

## Grupo de Botões de Ícone Flutuantes

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| Props       | Tipo                                     | Descrição                                                                                                                                                                                                                                                                                       |
| ----------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className   | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                                                                                                                                                                                                                                        |
| tamanho     | Nome opcional para estilização adicional | O tamanho do botão. Tem duas opções: `pequeno` e `médio`                                                                                                                                                                                                        |
| iconButtons | matriz                                   | Uma matriz de objetos, cada um representando um botão de ícone no grupo. Cada objeto deve incluir o componente de ícone que você deseja exibir no botão, a função que você deseja chamar quando um usuário clica no botão e se o botão deve estar ativo ou não. |

</Tab>

</Tabs>

## Botão Claro

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| Props      | Tipo                                     | Descrição                                                                                                 |
| ---------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| className  | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                                                  |
| ícone      | `React.ReactNode`                        | O ícone que você deseja exibir no botão                                                                   |
| título     | Nome opcional para estilização adicional | O conteúdo de texto do botão                                                                              |
| realce     | Nome opcional para estilização adicional | A cor de destaque do botão. As opções incluem: `secundário` e `terciário` |
| ativo      | booleano                                 | Determina se o botão está em um estado ativo                                                              |
| desativado | booleano                                 | Determina se o botão está desabilitado                                                                    |
| foco       | booleano                                 | Indica se o botão tem foco                                                                                |
| onClick    | funções                                  | Uma função de retorno de chamada que é acionada quando o usuário clica no botão                           |

</Tab>

</Tabs>

## Botão de Ícone Claro

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props      | Tipo                                     | Descrição                                                                                                 |
| ---------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| className  | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                                                  |
| testId     | Nome opcional para estilização adicional | Identificador de teste para o botão                                                                       |
| Ícone      | `React.ComponentType`                    | Um componente de ícone opcional exibido dentro do botão                                                   |
| título     | Nome opcional para estilização adicional | O conteúdo de texto do botão                                                                              |
| tamanho    | Nome opcional para estilização adicional | O tamanho do botão. Tem duas opções: `pequeno` e `médio`                  |
| realce     | Nome opcional para estilização adicional | A cor de destaque do botão. As opções incluem: `secundário` e `terciário` |
| ativo      | booleano                                 | Determina se o botão está em um estado ativo                                                              |
| desativado | booleano                                 | Determina se o botão está desabilitado                                                                    |
| foco       | booleano                                 | Indica se o botão tem foco                                                                                |
| onClick    | função                                   | Uma função de retorno de chamada que é acionada quando o usuário clica no botão                           |

</Tab>

</Tabs>

## Botão Principal

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props                          | Tipo                                     | Descrição                                                                                              |
| ------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| título                         | Nome opcional para estilização adicional | O conteúdo de texto do botão                                                                           |
| fullWidth                      | booleano                                 | Define se o botão deve ocupar toda a largura do seu contêiner                                          |
| variante                       | Nome opcional para estilização adicional | A variante de estilo visual do botão. As opções incluem `primário` e `secundário`      |
| em breve                       | booleano                                 | Indica se o botão está marcado como "em breve" (por exemplo, para recursos futuros) |
| Ícone                          | `React.ComponentType`                    | Um componente de ícone opcional exibido dentro do botão                                                |
| Propriedades `button` do React | `React.ComponentProps<'button'>`         | Todas as propriedades padrão de um botão HTML são suportadas                                           |

</Tab>

</Tabs>

## Botão de Ícone Arredondado

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props                          | Tipo                                            | Descrição |
| ------------------------------ | ----------------------------------------------- | --------- |
| Ícone                          | `React.ComponentType`                           |           |
| Propriedades `button` do React | `React.ButtonHTMLAttributes<HTMLButtonElement>` |           |

</Tab>

</Tabs>
